<template>
  <div class="commission page" ref="webview">
    <van-nav-bar title="佣金转注册积分" class="bg_white" left-arrow @click-left="$router.go(-1)" right-text="转账记录" @click-right="onClickRight" />
    <div class="content">
      <div class="form">
        <van-field v-model="transferMoney" type="number" @input="changeInput" clearable placeholder="请输入转账佣金">
          <span slot="button" class="text">可转账{{transfer.balance | toDecimalByCutoffWithoutOmit}}</span>
        </van-field>
        <van-field clearable :disabled="true" placeholder="实际到账注册积分">
          <span slot="button" class="text">{{regIntegral | toDecimalByCutoffWithoutOmit}}</span>
        </van-field>
        <van-field v-model="payPassword" type="password" maxlength="6" clearable placeholder="请输入支付密码">
          <span slot="button" v-if="!userInfo.isSetPayPass" class="setPassword" @click="goPay">设置支付密码</span>
        </van-field>
      </div>
      <div class="text">佣金转为注册积分比例: 1:{{transfer.ratio}}</div>
    </div>
    <div class="submiBtn">
      <van-button class="btn" round :loading="isLoading " @click.native="submitData">确认转账</van-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import md5 from 'md5';
export default {
  name: 'myCommission',
  data () {
    return {
      isLoading: false,
      transferMoney: null,
      payPassword: null,
      transfer: {}
    };
  },
  computed: {
    regIntegral () {
      return this.transfer && this.transfer.ratio * (this.transferMoney || 0);
    },
    ...mapGetters(['userInfo'])
  },
  created () {
    this.getTransferInit();
  },
  methods: {
    submitData () {
      if (!this.transferMoney) {
        this.$toast('转账佣金不能为空');
        return;
      }
      if (!this.payPassword) {
        this.$toast('支付密码不能为空');
        return;
      }
      this.isLoading = true;
      this.$API.user.transfer({
        transferMoney: this.transferMoney,
        payPwd: md5(md5(this.payPassword + ''))
      }, '').then(res => {
        if (!res.code) {
          this.$dialog.alert({
            title: '温馨提醒',
            message: '转账成功!',
            confirmButtonText: '完 成'
          }).then(() => {
            this.getTransferInit();
            this.isLoading = false;
            this.transferMoney = null;
            this.payPassword = null;
          });
        } else {
          this.isLoading = false;
          this.$toast(res.message);
        }
      });
    },
    changeInput () {
      this.transferMoney = this.transferMoney > this.transfer.balance ? this.transfer.balance : this.transferMoney;
    },
    getTransferInit () {
      this.$toast.loading({ duration: 0 });
      this.$API.user.transfer({}, 'init').then(res => {
        if (!res.code) {
          this.transfer = res.data;
          this.$toast.clear();
        } else {
          this.$toast(res.message);
        }
      });
    },
    goPay () {
      this.$router.push({ 'path': '/password/edit', query: { type: 2 } });
    },
    onClickRight () {
      this.$router.push({ 'path': '/transfer/record' });
    }
  }
};
</script>
<style lang="less" scoped>
.commission {
  display: flex;
  flex-direction: column;
  .submiBtn {
    position: absolute;
    bottom: 100px;
    left: 50px;
    right: 50px;
    .btn {
      width: 100%;
      padding: 9px 0;
      height: 100px;
      border: none;
      background-color: #fff;
      .van-button__text {
        font-size: 36px;
        color: #125dff;
      }
    }
  }
  .content {
    flex: 1;
    margin-top: 26px;
    position: relative;
    overflow: auto;
    .text {
      font-size: 28px;
      color: #125dff;
      padding: 25px 0 40px 40px;
    }
    .form {
      background-color: #fff;
    }
    .setPassword {
      color: #125dff;
      padding-right: 30px;
      display: block;
      &::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 24px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -12px;
        background-image: url('/static/images/icon-arrow-right.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 14px 24px;
        vertical-align: middle;
        margin-left: 32px;
      }
    }
    .text {
      color: #125dff;
    }
  }
}
</style>
